<template>
    <div class="bg">
        <nav-com title="转帐" :showView='showView' @back="backHandler()"></nav-com>
        <div>
            <div class="real_text">
                为保证资金安全到帐，请保证您输入的帐号准确无误
            </div>
            <div>
                <van-form>
                    <van-row class="box_mar">
                        <van-row>
                            <div class="box_pad" style="border-bottom:1px solid #e5e5e5;">
                                <label>收款方手机号</label>
                                <input type='text' v-model="tfrom.cellphone" @blur="cellphoneHandler(tfrom.cellphone)" placeholder="请输入收款方登录的手机号" />
                            </div>
                        </van-row>
                        <van-row>
                            <div class="box_pad">
                                <label>校验姓名</label>
                                <input type='text' v-model="tfrom.name" @blur="nameHandler(tfrom.name)" placeholder="请输入收款方实名认证的姓名" />
                            </div>
                        </van-row>
                    </van-row>
                    <div class="real_text">
                        {{message}}
                    </div>
                    <van-row class="box_mar">
                        <van-row>
                            <div class="box_pad" style="border-bottom:1px solid #e5e5e5;">
                                <label>转帐金额</label>
                                <input type='text' v-model="tfrom.money" @blur="moneyHandler(tfrom.money)" placeholder="请输入转帐金额" />
                            </div>
                        </van-row>
                        <van-row>
                            <div class="box_text">当前可转：{{cash}}</div>
                        </van-row>
                    </van-row>
                </van-form>
            </div>
            <div class="myteam_title">
                <i></i><span>转帐明细</span>
            </div>
            <ul class="teamlist">
                <van-list v-model="loading" :finished="finished" @load="onload">
                    <li v-for="(item,index) in list" :key="index">
                        <div class="teamlist_title">
                            <p>{{item.createdAt | formatDate}}</p>
                            <span>已转帐</span>
                        </div>
                        <div class="teamlist_bottom">
                            <p>{{item.name}}</p>
                            <span>{{item.value}}</span>
                        </div>
                    </li>
                </van-list>
            </ul>
        </div>
        <div style="height:22vw;"></div>
        <div class="real_bottom">
            <div style="padding: 4vw;">
                <van-button style="font-size:4.8vw; height:13.33vw;" color="#FF491F" type="info"  @click="btnHandler(tfrom)" round  block>提交</van-button>
            </div>
        </div>
    </div>
</template>
<script>
import navCom from '@/component/nav'
import {postTransfer,getAccountItems,getSummary }  from '@/api/api'
export default {
    name:'transfer',
    components:{
        navCom
    },
    data() {
        return {
            showView:true,
            uid: weixin.getUserId(),
            tfrom:{
                cellphone:'',
                name:'',
                money:'',
            },
            message:'',
            cash:'',
            pageNo:1,
            list:[],
            total:0,
            loading:true,
            finished:false,

        }
    },
    mounted(){
        this.init()
    },
    methods:{
        //返回
        backHandler(){
            this.$router.push('/my')
        },
        onload(){
            this.init()
        },
        //初始化
        init(){
            //金额
            getSummary({userId:this.uid}).then(res=>{
                if(res.data.code == 200){
                    let data = res.data.data
                    this.cash = data.pinmoney_bal
                }else {
                    this.$dialog.alert({
                        message:res.data.msg
                    })
                }
            })
            //列表
            let data = {
                userId:this.uid,
                acctc:'pinmoney',
                drcr:'decr',
                relType:'Transfer',
                pageNo:this.pageNo

            }
            getAccountItems(data).then(res=>{
                if(res.data.code == 200){
                    let rows = res.data.data.rows
                    if(rows.length == 0){
                        return false
                    }
                    this.pageNo++
                    this.list = this.list.concat(rows)
                    this.total = res.data.data.total
                    if(this.list.length < 1 ){
                        this.finished = true
                    }else if(this.list.length >= this.total){
                        this.finished = true
                    }else {
                        this.finished = false
                        this.loading = false
                    }
                }else{
                    this.$dialog.alert({
                        message:res.data.msg
                    })
                }
            })
        },
        //手机号验证
        cellphoneHandler(val){
            let reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
            if(val=='' || val.trim().length==0 ){
                this.message = '手机号不能为空'
                return false
            }else if(!reg.test(val)){
                this.message = '手机号不正确'
                return false
            }else {
                this.message = ''
                return true
            }
        },
        //姓名验证
        nameHandler(val){
            if(val=='' || val.trim().length==0){
                this.message = '姓名不能为空'
                return false
            }else {
                this.message = ''
                return true
            }
        },
        //金额验证
        moneyHandler(val){
            let reg = /^0\.[0-9]{1,2}$|^0$|^[1-9]\d{0,7}\.\d{1,2}$|^[1-9]\d{0,7}$/
            if(val=='' || val.trim().length==0){
                this.message = '金额不能为空'
                return false
            }else if(!Number(val)){
                this.message = '金额不正确'
                return false
            }else if( val <= 0){
                this.message = '金额必须是正数'
                return false
            }else if(!reg.test(val)){
                this.message = '金额不正确，小数点后只能保留两位'
                return false
            } else {
                this.message = ''
                return true
            }
        },
        //提交
        btnHandler(val){
            if(!this.cellphoneHandler(val.cellphone)){
                return false
            }else if(!this.nameHandler(val.name)){
                return false
            }else if(!this.moneyHandler(val.money)){
                return false
            }
            let data = {
                toUserCellphone:val.cellphone,
                toUserIdname:val.name,
                value:val.money
            }
            postTransfer(data).then(res=>{
                if(res.data.code == 200){
                    this.$dialog.alert({
                        message:res.data.msg
                    }).then(res=>{
                        this.init()
                    })
                    
                }else{
                    this.$dialog.alert({
                        message:res.data.msg
                    })
                }
            })
        },
    }
}
</script>
<style scoped>
p {padding:0; margin:0;}
.bg {background: #F1F3F6; position: relative; min-height: 100vh; height:auto;}
.real_bottom { position:fixed; left:0; bottom:0; width:100%; background: #fff;}
.real_text{color:#D91919; font-size:3.4vw; text-align: center; margin-top:2.6vw;}
.box_mar { background:#fff; margin-left:2.6vw; margin-right:2.6vw; margin-top:2.6vw;}
.box_pad {font-size:4vw; display:flex; margin:0vw 2.6vw; padding-top:4vw; padding-bottom:4vw;}
.box_pad label {display:block; padding-right:2.6vw;}
.box_pad input {font-size:4vw; width:60%; border:none;}
.box_text { padding:4vw 2.6vw; font-size:4vw; color:#696A6B;}
.myteam_title {margin-top:4vw; margin-left:2.6vw; display:flex;}
.myteam_title i {background: #FF491F; display:block; height: 4vw; width:0.8vw; }
.myteam_title span {font-size:3.7vw; display:block; padding-left:2.6vw; font-weight: bold;}
.teamlist {margin:0 4vw; height:auto; overflow: hidden; margin-bottom:20vw;}
.teamlist li {background: #fff;  margin-top:4vw; height:auto; overflow: hidden;}
.teamlist_title { display: flex; justify-content:space-between; padding:0 2.6vw; height:8vw; line-height:8vw; border-bottom:1px solid #d8d8d8; }
.teamlist_title p {color:#999;}
.teamlist_title span { color:#FF491F;}
.teamlist_bottom {display: flex; justify-content: space-between; height:12vw; line-height: 12vw;}
.teamlist_bottom p {padding-left:2.6vw;  color:#333;}
.teamlist_bottom span {padding-right:2.6vw; color:#FF0000;}

</style>